<template>
    <div class="wrapper">
        <div style="margin-top: -1px;padding-left: 5px;padding-right: 5px;background-color: white">
            <el-progress class="progressbar" style="background-color: white" :percentage="this.value/200*100"
                         :show-text="false"></el-progress>
        </div>

        <div style="display: flex;flex-direction: column;margin-top: 120px">
            <div style="font-size: 24px">
                {{ this.$route.query.info ? this.$route.query.info : "Navigating to the home page" }}
            </div>
            <div style="font-size: 20px;margin-top: 20px">
                Please wait...
            </div>
        </div>


        <div style="margin-top: 60px">
            <svg t="1626148438625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2865" width="100" height="100">
                <path
                    d="M653.328 125.024l-56.576 56.704L734.88 320H399.68C240.88 320 112 448.992 112 607.776c0 158.816 128 287.952 288 287.952v-80c-112 0-208-93.312-208-208.016 0-114.688 93.152-208 207.84-208h334.96l-137.888 137.856 56.528 56.56 234.48-234.496L653.344 125.024z"
                    p-id="2866" fill="#707070"></path>
            </svg>
        </div>

    </div>
</template>

<script>
export default {
    name: "Redirect",
    methods: {},
    data() {
        return {
            timedTasksCollector: null,
            tClock: null,
            value: 210,

        }
    },

    mounted() {
        this.tClock = setInterval(
            function () {
                if (_this.value >= 0)
                    _this.value = _this.value - 1
            }, 1
        );
        // //如果有重定向的话就设置，否则重定向到首页
        var redirect = this.$route.query.redirect ? this.$route.query.redirect : '/main'
        var to = this.$route.query.to ? this.$route.query.to : '/main'
        var _this = this;
        this.timedTasksCollector = setTimeout(function () {
            if (to === '/pass') {
                _this.$router.push({
                    path: to,
                    query: {
                        redirect: redirect
                    }
                })
            } else {
                _this.$router.push({
                    path: to,
                })
            }

        }, 2000);


    },
    beforeRouteLeave(to, from, next) {
        next();
        if (this.timedTasksCollector) {
            clearInterval(this.timedTasksCollector);
            this.timedTasksCollector = null;
        }
        if (this.tClock) {
            clearInterval(this.tClock);
            this.tClock = null;
            this.value = 200;
        }
    },

}
</script>

<style lang="scss" scoped>
.wrapper {
    background-color: white;
    position: fixed;
    width: 600px;
    height: 400px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    border-radius: 10px;
    display: flex;
    flex-direction: column;

}
/* 当前状态颜色 */
.progressbar >>> .el-progress-bar__outer {
    background-color: rgba(255, 255, 255, 0.2);
}
/* 进度条的背景色 */
.progressbar >>> .el-progress-bar__inner {
    background-color: #fff;
}

</style>